<template>
	<view>
		<an-nav-bar title="康约到家商户入驻"> </an-nav-bar>
		<view class="banner">
			<view class="">水疗养生/休闲娱乐/会所店铺经营管理平台</view>
		</view>
		<view class="serveSize">
			<image src="/static/serveSize.png" mode=""></image>
		</view>
		<view class="commission">
			<h1 class="flex_center">
				<b></b>
				<text>行业最低抽佣</text>
				<b></b>
			</h1>
			<view class="box">
				<view class="line flex_center">
					<view class="img">
						<image src="/static/commission1.png" mode="widthFix"></image>
						<view class="text1">
							抽
							<text>30%</text>
						</view>
					</view>
					<view class="right">
						<view class="">某平台</view>
						<view class="">抽拥30%</view>
					</view>
				</view>
				<view class="line flex_center">
					<view class="img">
						<image src="/static/commission2.png" mode="widthFix"></image>
						<view class="text2">商家获利</view>
						<view class="text3">最低抽佣</view>
					</view>
					<view class="right">
						<view class="">康约到家平台</view>
						<view class="">行业最低抽佣，商家利润提升30%</view>
					</view>
				</view>
			</view>
		</view>
		<view class="serveItem">
			<h1 class="flex_center">
				<b></b>
				<text>多种服务场景</text>
				<b></b>
			</h1>
			<view class="box flex_sw">
				<view class="item">
					<image src="/static/serveItem1.png" mode="widthFix"></image>
					<view class="">用户本地订单</view>
				</view>
				<view class="item">
					<image src="/static/serveItem2.png" mode="widthFix"></image>
					<view class="">异地差旅订单</view>
				</view>
			</view>
		</view>
		<view class="serveItem">
			<h1 class="flex_center">
				<b></b>
				<text>两种模式可选择</text>
				<b></b>
			</h1>
			<view class="box flex_sw">
				<view class="item">
					<image src="/static/serveItem3.png" mode="widthFix"></image>
					<view class="">上门服务</view>
				</view>
				<view class="item">
					<image src="/static/serveItem4.png" mode="widthFix"></image>
					<view class="">到店服务</view>
				</view>
			</view>
		</view>
		<view class="operation">
			<h1 class="flex_center">
				<b></b>
				<text>合作流程</text>
				<b></b>
			</h1>
			<view class="list flex_sw">
				<view class="item">
					<image src="/static/operation1.png" mode="widthFix"></image>
					<h6>1.提交资质</h6>
				</view>
				<view class="item">
					<image src="/static/operation2.png" mode="widthFix"></image>
					<h6>2.需求沟通</h6>
				</view>
				<view class="item">
					<image src="/static/operation3.png" mode="widthFix"></image>
					<h6>3.合同签订</h6>
				</view>
				<view class="item">
					<image src="/static/operation4.png" mode="widthFix"></image>
					<h6>4.上线使用</h6>
				</view>
				<view class="arrow1 flex_center">
					<i></i>
					<i></i>
					<i></i>
				</view>
			</view>
		</view>
		<!-- <view class="btn flex_center">
			<button>立即开店</button>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.btn {
		width: 100%;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 20rpx 0;
		z-index: 99;

		button {
			display: block;
			width: 710rpx;
			height: 88rpx;
			text-align: center;
			background: linear-gradient(270deg, #7893ef, #9d6ef7);
			border-radius: 56rpx;
			line-height: 88rpx;
			color: #fff;
			font-size: 32rpx;
		}
	}

	h1 {
		color: #666;
		font-size: 30rpx;
		padding: 24rpx 34rpx;

		b {
			display: block;
			width: 50rpx;
			height: 4rpx;
			background: url(/static/h1-line.png) no-repeat;
			background-size: 100% auto;

			&:first-child {
				transform: rotate(180deg);
			}
		}

		text {
			padding: 0 14rpx;
		}
	}

	.operation {
		padding-bottom: 250rpx;

		.list {
			padding: 0 30rpx;
			position: relative;

			.arrow1 {
				position: absolute;
				left: 0;
				top: 72 rpx;
				width: 100%;

				i {
					display: block;
					width: 22rpx;
					height: 24rpx;
					background: url(/static/double-arrow1.png) no-repeat 50%;
					background-size: 100% auto;
					margin-right: 168rpx;

					&:last-child {
						margin: 0;
					}
				}
			}

			.item {
				text-align: center;

				image {
					width: 120rpx;
					height: 120rpx;
					margin-bottom: 10rpx;
				}

				h6 {
					color: #666;
					font-size: 28rpx;
					font-weight: 400;
				}
			}
		}
	}

	.serveItem {
		padding: 0 30rpx;

		.item {
			width: 340rpx;
			height: 238rpx;
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;

			image {

				width: 100%;
				height: 100%;
			}

			view {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(51, 51, 51, .3);
				color: #fff;
				height: 238rpx;
				text-align: center;
				font-size: 30rpx;
				z-index: 99;
				line-height: 238rpx;
			}
		}
	}

	.commission {
		width: 690rpx;
		height: 500rpx;
		background: #fff;
		box-shadow: 0 0 10rpx 0 rgba(51, 51, 51, .2);
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 0 20rpx;
		margin: auto;

		.box {
			.line {
				width: 650rpx;
				height: 168rpx;
				background: #fbf8ff;
				border-radius: 20rpx;
				margin-bottom: 30rpx;

				.img {
					width: 226rpx;
					height: auto;
					position: relative;

					>view {
						position: absolute;
					}

					.text3 {
						color: #f69e1c;
						font-size: 22rpx;
						left: 74rpx;
						top: 96rpx;
						transform: rotate(-5deg);
					}

					.text2 {
						color: #6dd400;
						font-size: 22rpx;
						-webkit-transform: rotate(-12deg);
						transform: rotate(-15deg);
						top: 30rpx;
						left: 66rpx;
					}

					.text1 {
						color: #f69e1c;
						left: 43px;
						top: 16px;
						font-size: 20rpx;

						text {
							font-size: 24rpx;
						}
					}

					image {
						width: 226rpx;
					}
				}

				.right {
					margin-left: 88rpx;
					width: 274rpx;

					view {
						color: #666;
						font-size: 24rpx;

						&:last-child {
							margin-top: 10rpx;
						}
					}
				}
			}
		}


	}

	.serveSize {
		width: 690rpx;
		height: 340rpx;
		background: #fff;
		box-shadow: 0 0 10rpx 0 rgba(51, 51, 51, .2);
		border-radius: 10px;
		margin: 30rpx auto;

		image {
			width: 690rpx;
			height: 340rpx;

		}
	}

	.banner {
		width: 100%;
		height: 368rpx;
		background: url(/static/banner.png) no-repeat;
		background-size: 100% auto;
		color: #fff;
		position: relative;

		view {
			position: absolute;
			left: 40rpx;
			top: 156rpx;
			height: 42rpx;
			border-radius: 10rpx;
			border: 2rpx solid #fff;
			padding: 0 10rpx;
			line-height: 42rpx;
			box-sizing: border-box;
			font-size: 24rpx;
		}
	}
</style>
